<template>
  <div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
        <div class="main_top">
          <div class="lef">
            <div class="" v-for="item in typeList" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
              :value="item.id" @click="handleTab(item.id)">
              {{ item.value }} 
            </div>
          </div>
        </div>
        <div class="table">
          <detailBox v-if="currentNavtab == 0" ></detailBox >
          <rankingBox v-if="currentNavtab == 1" ></rankingBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rankingBox from './components/rankingBox'
import detailBox from './components/detailBox' 
export default {
  name: "shopDetail",
  components: {
    rankingBox,
    detailBox,
  },
  
  data() {
    return { 
      currentNavtab: 0,
      typeList: [
        {id: 0,value: '投注明细'},
        {id: 1,value: '竞猜排行'},
      ],
      id: '',
    };
  },
  watch: {
   
  },
  created() {
    this.id = this.$route.query.id
  },
  mounted() {
  
  },
  methods: {
    //切换选项
    handleTab(id) {
      this.currentNavtab = id
      // this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
.main_top{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    .lef{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 18px;
        border: 1px solid #dfe6ec;
        .list{
            width: 104px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-right: 1px solid #dfe6ec;
        }
        .list:nth-last-child(1){
            border: none;
        }
        .active{
            background: #1890ff;
            color: #fff;
        }
    }
}
</style>
